<template>
	<view class="zm-home">
		<u-navbar :is-back="false" title="" :border-bottom="false">
			<view class="navbar-slot">
				<view class="animate__animated" hover-class="animate__fadeIn"><u-icon name="list" size="40"></u-icon></view>
				<view 
					class="navbar-slot__listener animate__animated" 
					hover-class="animate__fadeIn"
					>
					<u-icon name="search" size="40"></u-icon>
				</view>
			</view>
		</u-navbar>
		
		<view class="user-info">
			<view class="user-info__cover">
				<u-image width="100%" height="100%" src="@/static/img/logo.png"></u-image>
			</view>
			<view class="user-info__info">
				<view class="username">
					廖子默
				</view>
				<view class="level">
					<text>Lv.9</text>
				</view>
				<text class="arrow iconfont icon-youbian"></text>
			</view>
		</view>
		<!-- 分类卡片 -->
		<view class="classify-wrap">
			<view class="classify-wrap__item">
				<view class="cover iconfont icon-yinle">
				</view>
				<text class="title">本地下载</text>
			</view>	
			<view class="classify-wrap__item">
				<view class="cover iconfont icon-yunpan">
				</view>
				<text class="title">云盘</text>
			</view>	
			<view class="classify-wrap__item">
				<view class="cover iconfont icon-yigou">
				</view>
				<text class="title">已购</text>
			</view>	
			<view class="classify-wrap__item">
				<view class="cover iconfont icon-bofang1">
				</view>
				<text class="title">最近播放</text>
			</view>	
			<view class="classify-wrap__item">
				<view class="cover iconfont icon-haoyou">
				</view>
				<text class="title">我的好友</text>
			</view>
			<view class="classify-wrap__item">
				<view class="cover iconfont icon-shoucang-copy-copy">
				</view>
				<text class="title">收藏和赞</text>
			</view>	
			<view class="classify-wrap__item">
				<view class="cover iconfont icon-boke1">
				</view>
				<text class="title">播客</text>
			</view>	
			<view class="classify-wrap__item">
				<view class="cover iconfont icon-jia">
				</view>
				<text class="title">音乐应用</text>
			</view>
		</view>
	
		<!-- 我喜欢的音乐 -->
		<view class="my-like">
			<view class="cover">
				<u-image width="100%" height="100%" src="@/static/img/logo.png"></u-image>
			
			</view>
			<view class="info">
				<view class="title">
					我喜欢的音乐
				</view>
				<view class="total">
					1184 首
				</view>
				
				<view class="heart-btn iconfont icon-ziyuan animate__animated" hover-class="animate__fadeIn">
					心动模式
				</view>
			</view>
		</view>
		<!-- 可以吸顶的tabs -->
		<view ref="stickyRef" :class="['tabs',{'tabs-is-sticky':isSticky}]">
			<view @click="changeTab(index,$event)" :data-index="index" :class="['tabs__item',{'is-active':activeTabs===index}]" v-for="(i,index) in tabsList" :key="i.id">
				<text>
					{{i.title}}
				</text>
			</view>
			<view class="bottom-anchor" ref="bottomAnchorRef">
				
			</view>
		</view>
		<!-- 创建歌单卡片,加入锚点 -->
		<view class="create-song" ref="anchor1">
			<view class="create-song__title">
				创建共享歌单，和你的好友一同管理
			</view>
			<view class="create-song__option">
				<view class="list-num">
					创建歌单(2个)
				</view>
				<view class="iconfont icon-jia">
					
				</view>
				<view class="iconfont icon-sandianshuzhuode">
					
				</view>
			</view>
			<view class="create-song__item">
				<view class="cover">
					<u-image width="100%" height="100%" src="@/static/img/logo.png"></u-image>
				</view>
				<view class="info">
					<view class="title">
						廖子默的2020年度歌单这是真的非常很把你弄454545
					</view>
					<view class="num">
						10 首
					</view>
				</view>
			</view>
			<view class="create-song__item">
				<view class="cover">
					<u-image width="100%" height="100%" src="@/static/img/logo.png"></u-image>
				</view>
				<view class="info">
					<view class="title">
					廖子默的2020年度歌单这是真的非常很把你弄454545
				</view>
				<view class="num">
					10 首
				</view>
				</view>
			</view>	
			<view class="create-song__item">
				<view class="imp-cover iconfont icon-daoru">
					<!-- <u-image width="100%" height="100%" src="@/static/img/logo.png"></u-image> -->
				</view>
				<view class="info">
					<view class="title">
					一键导入外部音乐
				</view>
				</view>
			</view>
		</view>
		<!-- 收藏的歌单 -->
		<view class="collect-song" ref="anchor2">
			<view class="collect-song__option">
				<view class="title">
					收藏歌单(51个)
				</view>
				<view class="iconfont icon-sandianshuzhuode">
					
				</view>
			</view>
			<view class="collect-song__item">
				<view class="cover">
					<u-image width="100%" height="100%" src="@/static/img/logo.png"></u-image>
				</view>
				<view class="info">
					<view class="title">
						廖子默的2020年度歌单这是真的非常很把你弄454545
					</view>
					<view class="num">
						10 首
					</view>
				</view>
			</view>		
			<view class="collect-song__item" v-for="i in 20" :key="i">
				<view class="cover">
					<u-image width="100%" height="100%" src="@/static/img/logo.png"></u-image>
				</view>
				<view class="info">
					<view class="title">
						廖子默的2020年度歌单这是真的非常很把你弄454545
					</view>
					<view class="num">
						10 首
					</view>
				</view>
			</view>
		</view>
		
		<!-- 歌单助手 -->
		<view class="song-helper" ref="anchor3">
			<view class="song-helper__title">
				歌单助手
			</view>
			<view class="song-helper__divider">
				<view class="left-sider">
				</view>
				<view class="content">
					你可以从歌单中筛选出
				</view>
				<view class="right-sider">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSticky:false,
				stickyBoxScrollTop:0,
				tabsList:[
					{
						id:1,
						title:'创建歌单'
					},
					{
						id:2,
						title:"收藏歌单"
					},
					{
						id:3,
						title:"歌单助手"
					}
				],
				activeTabs:0,
				tabsNodeList:[]
			};
		},
		methods:{
			changeTab(index,e){
				this.activeTabs = index;
				// 用这个数组和当前激活项目对比可知点击项目，利用里面属性动态改变锚点位置
				this.tabsNodeList.forEach(item=>{
					if(Number(item.index)===this.activeTabs){
						this.$refs.bottomAnchorRef.$el.style.transform = `translateX(${item.left}px)`;
						this.$refs.bottomAnchorRef.$el.style.width = `${item.width}px`;
					
						// 跳转到相应的锚点位置
						uni.pageScrollTo({
							scrollTop:this.$refs[`anchor${this.activeTabs+1}`].$el.offsetTop-100,
							success(){
								console.log(11);
							},
							fail(e){
								console.log(e);
							}
						})
					}
				})
				
			},
			// 得到tabs的子元素并处理成有用的数组
			getTabsChildrenNode(){
				// 记录这个tab到顶部的位置
				this.stickyBoxScrollTop = this.$refs.stickyRef.$el.offsetTop
				// 得到所有的子元素
				let childrenNode = this.$refs.stickyRef.$children;
				// 再将上面的子元素取出各自的有用的信息
				this.tabsNodeList = Array.from(childrenNode)
				.filter(item=>item.$el.dataset.index!=undefined)
				.map(item=>{
					return {
						index:item.$el.dataset.index,
						width:item.$children[0].$el.clientWidth,
						left:item.$el.offsetLeft+10
					}
				})
				// 取出第一项赋值初始化锚点数据
				this.$refs.bottomAnchorRef.$el.style.transform = `translateX(${this.tabsNodeList[this.activeTabs].left}px)`;
				this.$refs.bottomAnchorRef.$el.style.width = `${this.tabsNodeList[this.activeTabs].width}px`;
			}
		},
		mounted() {
			this.getTabsChildrenNode()	
		},
		onPageScroll(e) {
			if(e.scrollTop>this.stickyBoxScrollTop){
				this.isSticky = true;
			}else{
				this.isSticky = false;
			}
			
			let anchor1 = this.$refs.anchor1.$el.offsetTop;
			let anchor2 = this.$refs.anchor2.$el.offsetTop;
			let anchor3 = this.$refs.anchor3.$el.offsetTop;
			if(e.scrollTop>0&&e.scrollTop<anchor1){
				this.activeTabs = 0
				this.$refs.bottomAnchorRef.$el.style.transform = `translateX(${this.tabsNodeList[this.activeTabs].left}px)`;
			}else if(e.scrollTop>anchor2-50&&e.scrollTop<1500){
				this.activeTabs = 1
				this.$refs.bottomAnchorRef.$el.style.transform = `translateX(${this.tabsNodeList[this.activeTabs].left}px)`;
			}
		},
		onReachBottom(){
			this.activeTabs = 2;
			this.$refs.bottomAnchorRef.$el.style.transform = `translateX(${this.tabsNodeList[this.activeTabs].left}px)`;
		}
	}
</script>